<template>
  <div class="login">
    <Header title="账号登录" />
    <div class="header">
      <img src="../assets/u8.png" alt="" />
    </div>
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入账号/手机/邮箱"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
        />
        <div class="forgetPassword" @click="changePassword()">忘记密码</div>
        <div style="margin: 16px" >
          <van-button block type="info" class="login_btn" native-type="submit" @click="goHome()">登录</van-button>
        </div>
        <div style="margin: 16px">
          <van-button class="login_btn1" block type="info" native-type="submit" @click="goRegister"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Header from "../components/header";
export default {
  components: {
    Header,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    changePassword() {
      this.$router.push("/changePassword");
    },
    goHome() {
      this.$router.push("/membership");
    },
    goRegister() {
      this.$router.push("/register");
    }
  },
};
</script>

<style lang="less" scoped>
.login {
  .header {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
  .forgetPassword {
    color: #5b98b8;
    margin-left: 15px;
    margin-top: 10px;
  }
  .content {
    padding: 20px;
  }
  .login_btn {
    width: 100%;
    height: 40px;
    background: #169bd5 !important;
    border-radius: 10px !important;
  }
  .login_btn1 {
    width: 100%;
    height: 40px;
    background: #0289cd !important;
    border-radius: 10px !important;
  }
}
</style>